<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 表单区域 -->
      <el-form
        label-width="0px"
        class="login_form"
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
      >
        <!-- 用户名 -->
        <el-form-item prop="account">
          <el-input
            prefix-icon="el-icon-user"
            size="large"
            ref="focusRef"
            v-model="loginForm.account"
            @keyup.enter.native="openCaptcha"
            @focus="captchaVisible = false"
            :disabled="btnDisable"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            size="large"
            v-model="loginForm.password"
            @keyup.enter.native="openCaptcha"
            @focus="captchaVisible = false"
            :disabled="btnDisable"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="login_btns">
          <el-button
            type="info"
            size="large"
            @click="resetloginForm"
            :disabled="btnDisable"
            >重置</el-button
          >
          &nbsp;
          <el-popover
            popper-class="captcha_popper"
            placement="left-end"
            trigger="manual"
            visible-arrow
            v-model="captchaVisible"
          >
            <SliderCaptcha slot @onSuccess="login" />
            <el-button
              slot="reference"
              type="primary"
              size="large"
              @click="openCaptcha"
              :disabled="btnDisable"
              >{{ btnDisable ? "登录中..." : "登录" }}</el-button
            >
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import SliderCaptcha from "@/components/SliderCaptcha";
//登录实体
var loginEntity =
  process.env.NODE_ENV === "production"
    ? {
        account: "",
        password: "",
      }
    : {
        account: "System",
        password: "aymacustom",
      };
export default {
  components: { SliderCaptcha },
  data() {
    return {
      //登录表单实体
      loginForm: loginEntity,
      //验证实体
      loginFormRules: {
        account: [{ required: true, message: "请输入账号！", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          {
            min: 4,
            max: 15,
            message: "密码长度必须在4至15之间！",
            trigger: "blur",
          },
        ],
      },
      captchaVisible: false,
      btnDisable: false,
    };
  },
  mounted() {
    //初始化聚焦
    this.$refs["focusRef"].focus();
  },
  methods: {
    //重置登录表单
    resetloginForm() {
      this.$refs.loginFormRef.resetFields();
      this.captchaVisible = false;
    },
    //打开验证码
    openCaptcha() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        this.captchaVisible = true;
      });
    },
    //登录
    login(trackArr) {
      this.$message({
          message: "登录中...",
          iconClass: 'el-message__icon  el-icon-loading',
          duration: 0
      }); //提示
      this.captchaVisible = false; //验证码隐藏
      this.btnDisable = true; //按钮禁用
      //构造参数对象
      let o = {
        account: this.loginForm.account,
        password: this.util.md5(this.loginForm.password), //密码 转 MD5 32位 小写
        trackArr: trackArr,
      };
      //登录
      this.$store
        .dispatch("LoginByUsername", o)
        .then((res) => {
          //提示
          this.$message.success("登录成功！");
          //编程式导航页面跳转
          this.$router.push("/home");
        })
        .catch((err) => {
          this.btnDisable = false;
        });
    },
  },
};
</script>

<!-- scoped 当前样式只在当前组件生效 -->
<style lang="less" scoped>
.login_container {
  background: url("../assets/images/login_image.jpg");
  background-repeat: no-repeat; //不重复
  background-size: 100% 100%; // 满屏
  height: 100vh;
}
.login_box {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 80%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 1px 1px 50px;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_btns {
  display: flex;
  justify-content: flex-end;
}
</style>
<style>
.captcha_popper {
  background: #a6a9ad !important;
  border: 1px solid #a6a9ad !important;
}
</style>